<template>
  <div>
    <!--title-->
    <div class="content-title" ref="title">
      <div class="su-title">
        <i class="el-icon-tickets"> </i>
        <span>招聘计划</span>
      </div>
      <div class="batch-but-css">
        <el-button type="primary" icon="el-icon-plus el-icon--left" @click="titleAddClick">新增</el-button>
        <el-button type="danger" icon="el-icon-refresh el-icon--left" @click="tabsOrTableDialogEmpty">清空设置
        </el-button>
      </div>
    </div>

    <!--tabs-->
    <div class="common-tabs" ref="tabs">
      <el-tabs v-model="tabsProp.active" @tab-click="tabsSwitchClick">
        <el-tab-pane name="" label="全部"/>
      </el-tabs>
      <!--tabs 高级搜索-->
      <div class="common-tabs-right">
        <div class="common-tabs-right-search">
          <el-button type="info" @click="tabsProp.SearchDropDown=!tabsProp.SearchDropDown">
            高级搜索
            <i :class="[tabsProp.SearchDropDown?'el-icon-bottom':'el-icon-top','el-icon--right']"></i>
          </el-button>
        </div>
      </div>
      <!--tabs 搜索下拉的值-->
      <el-collapse-transition v-if="tabsProp.SearchDropDown">
        <ul class="common-tabs-from" ref="commonTabsFrom">
          <li v-if="Utils.tabsShowOrder('招聘计划标题',toConfigureFieldDialog.tabsProp).checkbox"
              :style="{order:Utils.tabsShowOrder('招聘计划标题',toConfigureFieldDialog.tabsProp).order}">
            <span>招聘计划标题</span>
            <el-input placeholder="请输入招聘计划标题" v-model="tabsSearchData.title" clearable/>
          </li>
          <li v-if="Utils.tabsShowOrder('招聘计划状态',toConfigureFieldDialog.tabsProp).checkbox"
              :style="{order:Utils.tabsShowOrder('招聘计划状态',toConfigureFieldDialog.tabsProp).order}">
            <span>招聘计划状态</span>
            <el-select placeholder="请选择招聘计划状态" v-model="tabsSearchData.planStatus" filterable clearable>
              <el-option v-for="item in tabsSearchOption.planStatusOption" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </li>
          <li v-for="index in tabsProp.liHtmlNum" :key="index+1000" style="order:888"></li>
          <li class="common-tabs-from-but" style="order:999">
            <el-button icon="el-icon-setting" circle @click="tabsOrTableSetClick('tabsProp','筛选项配置')"/>
            <el-button icon="el-icon-refresh el-icon--left" @click="tabsSearchReset">重置</el-button>
            <el-button icon="el-icon-search el-icon--left" type="primary" @click="tabsSearchDetermine">查询</el-button>
          </li>
        </ul>
      </el-collapse-transition>
    </div>

    <!--table-->
    <template>
      <!--表格前的按钮-->
      <div class="common-table-title-but" ref="tableTopBut">
      </div>
      <!--表格内容-->
      <el-table
          ref="table"
          :data="tableData"
          border
          style="width: 100%"
          :max-height="tableProp.tableHeight"
          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
          v-loading="tableProp.loading"
          @selection-change="tableSelectionChange"
          class="cc-table-style"
      >
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="招聘计划标题" min-width="150" :show-overflow-tooltip="true" align="center" prop="title"
                         v-if="Utils.tableShowFixed('招聘计划标题',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('招聘计划标题',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="招聘计划简介" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="description"
                         v-if="Utils.tableShowFixed('招聘计划简介',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('招聘计划简介',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="开始时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="fromDate"
                         v-if="Utils.tableShowFixed('开始时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('开始时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="结束时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="toDate"
                         v-if="Utils.tableShowFixed('结束时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('结束时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="创建时间" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="createdTime"
                         v-if="Utils.tableShowFixed('创建时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('创建时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="招聘计划状态" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="planStatus"
                         v-if="Utils.tableShowFixed('招聘计划状态',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('招聘计划状态',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tabsSearchOption.planStatusOption">
              <template v-if="scope.row.planStatus==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="235" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="tableSeeClick(scope.row,0)">查看/编辑
            </el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="tableDelClick(scope.row,0)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="common-pagination">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="paginationProp.currentPage"
            :page-sizes="[10, 20, 50, 100,500,1000]"
            :page-size="paginationProp.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="paginationProp.total"
        />
      </div>
    </template>

    <!--抽屉增加和修改-->
    <el-drawer
        :title="drawerProp.title"
        :visible.sync="drawerProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        custom-class="common-drawer"
        size="1050px"
    >
      <div class="common-drawer-content" v-loading="drawerProp.loading">
        <div class="parent">
          <!--左边-->
          <div class="leftChild">
            <ul class="content">
              <li :class="[drawerProp.active===0?'active':'']" @click="drawerActiveClick(0)">基础设置</li>
              <li :class="[drawerProp.active===1?'active':'']" @click="drawerActiveClick(1)"
                  v-if="drawerProp.status!='add' && drawerProp.status!='edit'">招聘职位
              </li>
            </ul>
          </div>
          <!--右边-->
          <div class="rightChild">
            <ul class="content" ref="scrollViewRight" @wheel.passive="addWheelChange"
                :style="{'height': drawerProp.rightProp.height+'px'}">
              <li class="content-main" ref="drawerLi0">
                <div class="title">
                  <span></span>
                  <label>基础设置</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see' && drawerProp.seeBut">
                    <div class="n" @click="drawerEdit(0)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status!=='add' && drawerProp.status!=='edit'">
                  <ul class="common-drawer-see">
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">招聘计划标题</span>
                      {{ formData.title }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">招聘计划简介</span>
                      {{ formData.description }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">开始时间</span>
                      {{ Utils.timeDate(formData.fromDate, 3) }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">结束时间</span>
                      {{ Utils.timeDate(formData.toDate, 3) }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">招聘计划状态</span>
                      <template v-for="item in formDataOption.planStatusOption">
                        <template v-if="formData.planStatus==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                  </ul>
                </div>
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-form :model="formData" ref="drawerFrom0" class="common-drawer-edit">
                    <el-form-item label="招聘计划标题" prop="title" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入招聘计划标题', trigger: 'blur' }]">
                      <el-input placeholder="请输入招聘计划标题" v-model="formData.title" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="招聘计划简介" prop="description" class="common-drawer-edit-li li2"
                                  :rules="[{ required: true, message: '请输入招聘计划简介', trigger: 'blur' }]">
                      <el-input placeholder="请输入招聘计划简介" type="textarea" v-model="formData.description"
                                :disabled="false" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300"
                                show-word-limit/>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="fromDate" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择开始时间" v-model="formData.fromDate" :disabled="false"
                                      type="date" default-time="23:59:59" value-format="yyyy-MM-dd"/>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="toDate" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择结束时间" v-model="formData.toDate" :disabled="false"
                                      type="date" default-time="23:59:59" value-format="yyyy-MM-dd"/>
                    </el-form-item>
<!--                    <el-form-item label="招聘计划状态" prop="planStatus" class="common-drawer-edit-li li2"-->
<!--                                  :rules="[{ required: true, message: '请选择招聘计划状态', trigger: 'change' }]">-->
<!--                      <el-select placeholder="请选择招聘计划状态" v-model="formData.planStatus" filterable clearable-->
<!--                                 :disabled="false">-->
<!--                        <el-option v-for="item in formDataOption.planStatusOption" :key="item.value" :label="item.label"-->
<!--                                   :value="item.value"/>-->
<!--                      </el-select>-->
<!--                    </el-form-item>-->
                  </el-form>
                </div>
              </li>
              <li class="content-main" ref="drawerLi1"
                  v-show="drawerProp.status==='see' || drawerProp.status==='handle1'">
                <div class="title">
                  <span></span>
                  <label>招聘职位</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see'">
                    <div class="n" @click="drawerEdit(1,'handle1')">
                      <i class="el-icon-edit"></i>
                      新增招聘职位
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status==='see'">
                  <!--处理记录-->
                  <div style="height: 15px"></div>
                  <el-table
                      ref="table"
                      :data="formData.recruitmentPlanPosition"
                      border
                      style="width: 100%"
                      :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                      class="cc-table-style"
                  >
                    <el-table-column label="职位名" min-width="150" :show-overflow-tooltip="true" align="center"
                                     prop="positionId">
                      <template slot-scope="scope">
                        <template v-for="item in postionsOptionsAll">
                          <template v-if="scope.row.positionId==item.id">
                            {{ item.name }}
                          </template>
                        </template>
                      </template>
                    </el-table-column>
                    <el-table-column label="备注" min-width="150" :show-overflow-tooltip="true" align="center"
                                     prop="note"/>
                    <el-table-column label="数量" min-width="150" :show-overflow-tooltip="true" align="center"
                                     prop="amount"/>
                    <el-table-column label="操作" width="210" align="center" fixed="right">
                      <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit el-icon--left"
                                   @click="drawerTableEdit1(scope.row)">编辑
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete el-icon--left"
                                   @click="drawerTableDel1(scope.row)">删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <!--修改-->
                <div class="edit" v-if="drawerProp.status==='handle1'">
                  <el-form :model="formData" ref="drawerFrom1" class="common-drawer-edit">
                    <el-form-item label="职位" prop="positionId" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入职位名', trigger: 'blur' }]">
                      <el-select placeholder="请选择职位" v-model="formData.positionId" filterable clearable
                                 :disabled="false">
                        <el-option v-for="item in postionsOptionsAll" :key="item.id" :label="item.name"
                                   :value="item.id"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="note" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
                      <el-input placeholder="请输入备注" v-model="formData.note" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="数量" prop="amount" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入数量', trigger: 'blur' }]">
                      <el-input placeholder="请输入数量" v-model="formData.amount" :disabled="false" clearable/>
                    </el-form-item>
                  </el-form>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--操作按钮-->
        <template>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='add'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerProp.isDrawer=false">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('add')">保 存
            </el-button>
          </div>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='edit'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerSubmitForm('see')">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('edit')">保 存
            </el-button>
          </div>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='handle1'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerSubmitForm('see')">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('handle1')">保 存
            </el-button>
          </div>

        </template>
      </div>
    </el-drawer>

    <!--dialog 集合-->


    <!--tabs和table dialog 字段选择显示问题-->
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        :title="toConfigureFieldDialog.title"
        :visible.sync="toConfigureFieldDialog.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="tabsOrTableCancel"
        width="1060px"
    >
      <div class="toConfigure-field-dialog-content" v-loading="toConfigureFieldDialog.loading">
        <div class="left">
          <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="tabsOrTableSearch(toConfigureFieldDialog.search)"/>
          </el-input>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <template v-for="(item,key) in toConfigureFieldDialog[toConfigureFieldDialog.status]">
                  <dl :key="key" class="content" v-if="item.show">
                    <dt>{{ item.name }}</dt>
                    <dd>
                      <template v-for="(item2, key2) in item.option">
                        <el-checkbox v-model="item2.checkbox" @change="tabsOrTableChecked(item2)" :key="key2"
                                     v-if="item2.show" :disabled="item2.disabled">
                          <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label"
                                      placement="top-start" :key="key">
                            <div class="tooltip">{{ item2.label }}</div>
                          </el-tooltip>
                        </el-checkbox>
                      </template>
                    </dd>
                  </dl>
                </template>
              </el-scrollbar>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="title">
            已选择（{{ toConfigureFieldDialog.selectNum }}）
          </div>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <!--tabs配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tabsProp'">
                  <draggable v-model="toConfigureFieldDialog.draggableProp">
                    <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                      <li :key="key">
                        <i class="el-icon-thumb"/><span>{{ item.label }}</span><i class="el-icon-close"
                                                                                  @click="tabsOrTableClose(item,key)"
                                                                                  v-show="!item.disabled"></i>
                      </li>
                    </template>
                  </draggable>
                </ul>
                <!--table配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tableProp'">
                  <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                    <li :key="key">
                      <i class="el-icon-thumb"/><span>{{ item.label }}</span>
                      <el-select v-model="item.fixed" class="frozenSelect">
                        <el-option v-for="item in $store.state.tableFixed" :key="item.value" :label="item.label"
                                   :value="item.value"/>
                      </el-select>
                      <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                    </li>
                  </template>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button type="danger" @click="tabsOrTableDialogReductionInit(toConfigureFieldDialog.status)"
                   icon="el-icon-delete el-icon--left">还原初始化
        </el-button>
        <el-button @click="tabsOrTableCancel" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="tabsOrTableDetermine" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'navigation45',
  components: {draggable},
  props: [],
  data() {
    return {
      //接口名称
      apiProp: {
        tableInit: 'navigation45List',//表格初始化
        tableAddEdit: 'navigation45AddEdit',//表格增加和编辑接口
        tableDel: 'navigation45Del',//表格删除接口
        tableQuery: 'navigation45Query',//表格查一条接口
        tableBatchDel: 'navigation45BatchDel',//批量删除接口
        tabsOrTableId: 0,//设置搜索条件和表头id
        selectApiBoolean: false,//比初始化接口先运行的接口是否先运行完成
      },
      headersData: {token: window.localStorage.getItem('token')},//导入之类要用

      //title 配置
      titleProp: {},

      //tabs 配置
      tabsProp: {
        active: '',
        statusField: 'status',//切换的字段名
        SearchDropDown: true,//高级搜索下拉默认显示状态
        liHtmlNum: '',//有高级搜索时候差几个li
      },
      //tabs 搜索字段
      tabsSearchData: {
        title: '',//招聘计划标题
        planStatus: '',//招聘计划状态
      },
      //tabs 选项
      tabsSearchOption: {
        //招聘计划状态 选项
        planStatusOption: [
          {label: '全部', value: ''},
        ],
      },

      //table 数据
      tableData: [],
      tableProp: {
        loading: false,
        tableHeight: 0,
        tableSelectAll: [],//表格多选的值
      },
      // table 选项
      tableSearchOption: {//table 招聘计划状态 选项
        planStatusOption: [
          {label: '', value: ''},
        ],
      },
      //table dialog data
      tableDialogProp: {},
      RowId:undefined,
      RowData:undefined,

      // 抽屉 值
      formData: {
        id: '',
        title: '',//招聘计划标题
        description: '',//招聘计划简介
        fromDate: '',//开始时间
        toDate: '',//结束时间
        planStatus: '1',//招聘计划状态
        recruitmentPlanPosition: [],//招聘职位 字段
        planId: '',// 招聘职位 链表id
        positionName: '',//职位名
        note: '',//备注
        amount: '',//数量
        positionId:''
      },
      // 抽屉 选项
      formDataOption: {//招聘计划状态 选项
        planStatusOption: [
          {label: '', value: ''},
        ],
      },
      //抽屉 配置
      drawerProp: {
        isDrawer: false,
        loading: false,
        title: '',
        seeBut: true,//是否是 查看/编辑 只有查看就是false
        active: 0,//左边选择了哪个
        status: 'add',// add 新增  see 查看
        leftProp: ["基础设置", "招聘职位",],
        rightProp: {
          height: document.documentElement.clientHeight - 90,//右边高度
        }
      },
      postionsOptionsAll:undefined,

      //分页配置
      paginationProp: {
        currentPage: 1,//当前第几页
        pageSize: 10,//每页几条
        total: 0,//总数
      },
      //tabs和table dialog 字段选择显示
      toConfigureFieldDialog: {
        isDialog: false,
        title: '筛选项配置',
        loading: false,
        status: 'tabsProp',
        search: '',//搜索的值
        selectNum: 0,//选择的数量
        frozenFrontNum: 0,//冻结前几条
        frozenAfterNum: 0,//冻结后几条
        draggableProp: [],//拖拽数据
        tabsProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: [
              {checkbox: true, label: '招聘计划标题', show: true, order: 0},
              {checkbox: true, label: '招聘计划状态', show: true, order: 0},
            ]
          },
          {
            name: '招聘职位',//标题
            show: true,//搜索是否显示
            option: []
          },
        ],
        tableProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: [
              {checkbox: true, label: '招聘计划标题', show: true, order: 0},
              {checkbox: true, label: '招聘计划简介', show: true, order: 0},
              {checkbox: true, label: '开始时间', show: true, order: 0},
              {checkbox: true, label: '结束时间', show: true, order: 0},
              {checkbox: true, label: '创建时间', show: true, order: 0},
              {checkbox: true, label: '招聘计划状态', show: true, order: 0},
            ]
          },
          {
            name: '招聘职位',//标题
            show: true,//搜索是否显示
            option: [
              {checkbox: true, label: '职位名', show: true, order: 0},
              {checkbox: true, label: '备注', show: true, order: 0},
              {checkbox: true, label: '数量', show: true, order: 0},
            ]
          },
        ]
      }
    };
  },
  activated() {
  },
  created() {
    this.tabsSearchOption.planStatusOption = this.tabsSearchOption.planStatusOption.concat(this.$getDictData('recruitment_plan_status'))
    this.formDataOption.planStatusOption = this.$getDictData('recruitment_plan_status')
    this.$positionAll({tenantId:window.sessionStorage.getItem('id')}).then(res=>{
      this.postionsOptionsAll = res
    })
  },
  mounted() {
    //高级搜索差几个li
    this.tabsOrTableInit();
    this.initData();//数据初始化
    this.calculationHeight();//table计算高度
    //监听浏览器变化
    window.onresize = () => {
      return (() => {
        this.calculationHeight();//table计算高度
      })();
    };
  },
  watch: {
    //主要作用监听赋值给table高度
    'tabsProp.SearchDropDown'() {
      this.calculationHeight();//table计算高度
    },
  },
  computed: {},
  methods: {
    //初始化
    initData() {

      this.tableProp.loading = true;
      //下拉接口
      let variableArray = [];//变量数组
      if (!this.apiProp.selectApiBoolean) {
        // const form1=new Promise((resolve)=>{
        // this.$().then((result) => {
        //   console.log(result);
        // this.empUnitIdOption = result.map(item => ({
        //  label: item.unitName,
        //  value: item.id
        //  }));
        // resolve()
        // })
        // })
        // variableArray.push(form1)
        this.apiProp.selectApiBoolean = true;
      }
      Promise.all(variableArray).then(() => {
        if (this.apiProp.tableInit) {
          let params = {
            page: this.paginationProp.currentPage,
            row: this.paginationProp.pageSize,
            title: encodeURI(this.tabsSearchData.title),//招聘计划标题
            planStatus: this.tabsSearchData.planStatus,//招聘计划状态
          }
          params[`${this.tabsProp.statusField}`] = this.tabsProp.active == 0 ? '' : this.tabsProp.active;
          this[`$${this.apiProp.tableInit}`](params).then((result) => {
            if (result.data) {
              if (result.data.length == 0) {
                if (this.paginationProp.currentPage != 1) {
                  this.paginationProp.currentPage = this.paginationProp.currentPage - 1;
                  this.initData()
                  return false;
                }
              }


              this.tableData = result.data.map(item => ({
                id: item.id,
                title: item.title,//招聘计划标题
                description: item.description,//招聘计划简介
                fromDate: this.Utils.timeDate(item.fromDate, 3),//开始时间
                toDate: this.Utils.timeDate(item.toDate, 3),//结束时间
                createdTime: item.createdTime,//创建时间
                planStatus: item.planStatus,//招聘计划状态
              }));
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            } else {
              this.tableData = [];
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            }
          }, () => {
            this.tableProp.loading = false;
          })
        } else {
          this.tableProp.loading = false;
        }
      })
    },
    //table 点击查看
    tableSeeClick(row, key,flag) {
      this.drawerProp.isDrawer = true;
      this.drawerProp.title = '详细信息';
      this.drawerProp.status = 'see';
      if (key !== undefined) {
        this.drawerActiveClick(key)
      }
      if (flag){
        this.formData = JSON.parse(JSON.stringify(this.RowData))
      }else {
        this.formData = JSON.parse(JSON.stringify(row))
        this.RowData = JSON.parse(JSON.stringify(row))
      }

      // this.formData = this.$options.data().formData;
      this.drawerProp.loading = true;
      this.RowId  =  row.id
      // this.drawerProp.loading = false;
      // this[`$${this.apiProp.tableQuery}`](params).then((result) => {
      //   this.formData.id = result.data.id;
      //   this.formData.title = result.data.title;//招聘计划标题
      //   this.formData.description = result.data.description;//招聘计划简介
      //   this.formData.fromDate = this.Utils.stampData13(result.data.fromDate);//开始时间
      //   this.formData.toDate = this.Utils.stampData13(result.data.toDate);//结束时间
      //   this.formData.planStatus = result.data.planStatus;//招聘计划状态
        //招聘职位 接口返回的值
        this.$recruitmentPlanPositionAll({planId: row.id,}).then((res1) => {
          this.formData.recruitmentPlanPosition = res1.map(item1 => ({
            id: item1.id,//
            planId: item1.planId,//招聘职位 链表id
            positionName: item1.positionName,//职位名
            note: item1.note,//备注
            amount: item1.amount,//数量
            positionId: item1.positionId
          }));
          // this.formData.planId = '';//招聘职位 链表id
          // this.formData.positionName = '';//职位名
          // this.formData.note = '';//备注
          // this.formData.amount = '';//数量
          this.drawerProp.loading = false;
        })

      // })
    },
    //抽屉 点击保存 和取消
    drawerSubmitForm(status) {
      if (status === 'see') {
        this.drawerProp.status = 'see';
        this.tableSeeClick({id: this.formData.id}, this.drawerProp.active,true);
        // this.formData = this.RowData
        return false
      }
      //招聘职位
      if (status === 'handle1') {
        this.$refs['drawerFrom1'].validate((valid) => {
          if (valid) {
            this.drawerProp.loading = true;
            let data = {
              id: this.formData.planId,//
              planId: this.formData.id,//招聘职位 链表 id
              // recruitmentPlanPosition: this.formData.recruitmentPlanPosition,//招聘职位
              // positionName: this.formData.positionName,//职位名
              note: this.formData.note,//备注
              amount: this.formData.amount,//数量
              positionId:this.formData.positionId,
              tenantId:window.sessionStorage.getItem('id')
            }
            this.$recruitmentPlanPositionAddEdit(data).then(() => {
              this.$message.success('保存成功');
              this.initData();
              this.drawerProp.loading = false;
              this.drawerProp.status = 'see';
              this.tableSeeClick({id: this.formData.id},undefined,true)
              // if (status === 'add') {
              //   this.drawerProp.isDrawer = false;
              //   this.drawerProp.loading = false;
              // } else {
              //   this.drawerProp.loading = false;
              //   this.drawerProp.status = 'see';
              //   this.tableSeeClick({id: this.formData.id},undefined,true)
              // }
            }, () => {
              this.drawerProp.loading = false;
            })
          }
        })
        return false
      }
      //新增不是数组
      let variableArray = [];//变量数组
      variableArray.push('form' + 0);
      variableArray[0] = new Promise((resolve) => {
        this.$refs['drawerFrom0'].validate((valid) => {
          if (valid)
            resolve()
        })
      })
      Promise.all(variableArray).then(() => {
        this.drawerProp.loading = true;
        let data = {
          id: this.formData.id,
          title: this.formData.title,//招聘计划标题
          description: this.formData.description,//招聘计划简介
          fromDate: this.Utils.timeDate(this.formData.fromDate, 3),//开始时间
          toDate: this.Utils.timeDate(this.formData.toDate, 3),//结束时间
          planStatus: this.formData.planStatus,//招聘计划状态
          tenantId:window.sessionStorage.getItem('tenantId'),
          createdBy:window.sessionStorage.getItem('id'),
          updatedBy:window.sessionStorage.getItem('id')
        }
        this[`$${this.apiProp.tableAddEdit}`](data).then(() => {
          this.$message.success('保存成功');
          this.initData();
          this.drawerProp.isDrawer = false;
          this.drawerProp.loading = false;
          // if (status === 'add') {
          //   this.drawerProp.isDrawer = false;
          //   this.drawerProp.loading = false;
          // } else {
          //   this.drawerProp.loading = false;
          //   this.drawerProp.status = 'see';
          //   this.tableSeeClick({id: this.formData.id})
          // }
        }, () => {
          this.drawerProp.loading = false;
        })
      })
    },
    //抽屉 点击编辑
    drawerEdit(key, handle) {
      //新增招聘职位
      if (handle == 'handle1') {
        this.drawerProp.title = '新增招聘职位';
        this.drawerProp.status = 'handle1';
        this.drawerActiveClick(key);
        return false
      }
      console.log(handle);
      this.drawerProp.title = '修改详细信息';
      this.drawerProp.status = 'edit';
      this.drawerActiveClick(key);
    },
    //招聘职位 表格里的编辑
    drawerTableEdit1(row) {
      this.drawerProp.status = 'handle1';
      this.$set(this.formData, 'planId', row.id)
      this.$set(this.formData, 'note', row.note)
      this.$set(this.formData, 'amount', row.amount)
      this.$set(this.formData, 'positionId', row.positionId)
      // this.formData.planId = JSON.parse(JSON.stringify(row.id));//招聘职位 链表id
      // // this.formData.recruitmentPlanPosition = row.recruitmentPlanPosition;//招聘职位
      // // this.formData.positionName = row.positionName;//职位名
      // this.formData.note = JSON.parse(JSON.stringify(row.note));//备注
      // this.formData.amount = JSON.parse(JSON.stringify(row.amount));//数量
      // this.formData.positionId = JSON.parse(JSON.stringify(row.positionId))
    },
    //招聘职位 表格里的删除
    drawerTableDel1(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        this.$recruitmentPlanPositionDel(data).then(() => {
          this.$message.success('删除成功');
          this.$recruitmentPlanPositionAll({planId: this.formData.id,}).then((res1) => {
            this.formData.recruitmentPlanPosition = res1.map(item1 => ({
              id: item1.id,//
              planId: item1.planId,//招聘职位 链表id
              positionName: item1.positionName,//职位名
              note: item1.note,//备注
              amount: item1.amount,//数量
            }));
          })

        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //title 新增 点击
    titleAddClick() {
      this.formData = this.$options.data().formData;
      this.drawerProp.isDrawer = true;
      this.drawerProp.loading = false;
      this.drawerProp.title = '新增';
      this.drawerProp.status = 'add';
      this.drawerActiveClick(0)
    },
    //tabs 高级搜索 重置按钮
    tabsSearchReset() {
      this.tabsSearchData = this.$options.data().tabsSearchData;
    },
    //tabs 高级搜索 查询按钮点击
    tabsSearchDetermine() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //tabs 切换点击
    tabsSwitchClick() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //table 分页 选择了每页几条
    pageSizeChange(val) {
      this.paginationProp.currentPage = 1;//当前第几页
      this.paginationProp.pageSize = val;//每页几条
      this.initData();
    },
    //table 分页 点击了跳转到第几页
    pageCurrentChange(val) {
      this.paginationProp.currentPage = val;//当前第几页
      this.initData();
    },
    //table 多选
    tableSelectionChange(val) {
      this.tableProp.tableSelectAll = [];
      for (let i = 0; i < val.length; i++) {
        this.tableProp.tableSelectAll.push(val[i].id)
      }
    },
    //table 点击删除
    tableDelClick(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        this[`$${this.apiProp.tableDel}`](data).then(() => {
          this.$message.success('删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //抽屉左边 点击切换标题
    drawerActiveClick(key) {
      setTimeout(() => {
        let scrollHeight = 0;
        this.drawerLiArray = [];
        for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
          this.drawerLiArray.push(this.$refs[`drawerLi${i}`].scrollHeight);
          if (key > i) {
            scrollHeight += this.$refs[`drawerLi${i}`].scrollHeight
          }
        }
        this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
        this.drawerProp.active = key;
      }, 300)
    },
    //抽屉右边 监听鼠标滚动
    addWheelChange() {
      setTimeout(() => {
        let scrollTop = 0;
        for (let i = 0; i < this.drawerLiArray.length; i++) {
          scrollTop += this.drawerLiArray[i];
          if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
            this.drawerProp.active = i;
            return false;
          }
        }
      }, 300)
    },
    //附件下载
    uploadFileDownload(url, item) {
      //下载不了是跨域的问题
      const URL = url
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', URL, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = item.name
          } else {
            a.setAttribute('download', item.name)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载 开始
    clickImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
            'el-image-viewer__actions__inner'
        )
        let downImg = document.createElement('i')
        downImg.setAttribute('class', 'el-icon-download')
        wrapper[0].appendChild(downImg)
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0]
          this.cusClickHandler()
        }
      })
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener('click', this.hideCusBtn)
    },
    hideCusBtn(e) {
      let className = e.target.className
      if (className === 'el-icon-download') {
        let imgUrl = document.getElementsByClassName(
            'el-image-viewer__canvas'
        )[0].children[0].src
        this.downloadImage(imgUrl)
      }
    },
    downloadImage(imgUrl) {
      let tmpArr = imgUrl.split('/')
      let fileName = tmpArr[tmpArr.length - 1]
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', imgUrl, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = fileName
          } else {
            a.setAttribute('download', fileName)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载结束
    //table 批量删除
    tableTitleButBatchDel() {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.tableProp.tableSelectAll.length > 0 ? this.tableProp.tableSelectAll.toString() : ''
        }
        this[`$${this.apiProp.tableBatchDel}`](params).then(() => {
          this.$message.success('批量删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消批量删除');
      });
    },
    //table 计算高度
    calculationHeight() {
      setTimeout(() => {
        this.tableProp.tableHeight = document.documentElement.clientHeight - 220 - this.$refs.title.clientHeight - this.$refs.tabs.clientHeight - this.$refs.tableTopBut.clientHeight;
      }, 300)
    },
    //tabs or table dialog 初始化
    tabsOrTableInit() {
      this.toConfigureFieldDialog.loading = true;
      // let data = {
      //   tableId: this.apiProp.tabsOrTableId
      // }
      // this.$commonApi2(data).then((result) => {
      //   if (result.data && result.data.data) {
      //     this.toConfigureFieldDialog = JSON.parse(result.data.data);
      //   } else {
      //     this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
      //   }
      //
      //   this.toConfigureFieldDialog.isDialog = false;
      //   this.toConfigureFieldDialog.loading = false;
      //   let tabsFieldPropNum = 0; //有几个li
      //   for (let i = 0; i < this.toConfigureFieldDialog.tabsProp.length; i++) {
      //
      //     for (let j = 0; j < this.toConfigureFieldDialog.tabsProp[i].option.length; j++) {
      //       if (this.toConfigureFieldDialog.tabsProp[i].option[j].checkbox) {
      //         tabsFieldPropNum++
      //       }
      //     }
      //   }
      //   if (this.$refs.commonTabsFrom) {
      //     let aLineNum = parseInt((this.$refs.commonTabsFrom.clientWidth / 462).toString());//一行几个
      //     this.tabsProp.liHtmlNum = aLineNum - tabsFieldPropNum % aLineNum - 1;//差几个li
      //   }
      // })
    },
    //tabs or table dialog 点击搜索
    tabsOrTableSearch(search) {
      if (search) {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          let oneShow = false;//第一层是否显示
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            if (this.Utils.fuzzySearch(search, this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label)) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
              oneShow = true;
            } else {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = false;
            }
          }
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = oneShow;
        }
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = true;
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
          }
        }
      }
    },
    //tabs or table dialog 拖动点击删除
    tabsOrTableClose(item, key) {
      this.toConfigureFieldDialog.draggableProp.splice(key, 1);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          if (this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label === item.label) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].checkbox = false;
          }
        }
      }
    },
    //tabs or table dialog 清空以前的设置
    tabsOrTableDialogEmpty() {
      this.$confirm('此操作将永久清空搜索和表头设置, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          tableId: this.apiProp.tabsOrTableId,
          data: null
        }
        this.$commonApi(data).then(() => {
          this.$message.success('清空设置成功');
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        })
      }).catch(() => {
        this.$message.info('已取消清空设置');
      });
    },
    //tabs or table dialog 还原初始化
    tabsOrTableDialogReductionInit(status) {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.isDialog = true;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs or table dialog 点击 关闭 取消
    tabsOrTableCancel() {
      this.tabsOrTableInit();
    },
    //tabs or table dialog 点击确定
    tabsOrTableDetermine() {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.search = '';
      this.tabsOrTableSearch(this.toConfigureFieldDialog.search);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          for (let k = 0; k < this.toConfigureFieldDialog.draggableProp.length; k++) {
            if (this.toConfigureFieldDialog.draggableProp[k].label === this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].order = k;
            }
          }
        }
      }
      let data = {
        tableId: this.apiProp.tabsOrTableId,
        data: JSON.stringify(this.toConfigureFieldDialog)
      }
      this.$commonApi(data).then(() => {
        this.$message.success('保存成功');
        this.tabsOrTableInit();
        this.tabsSearchData = this.$options.data().tabsSearchData;
        this.initData();
      })
    },
    //tabs or table dialog 点击选择
    tabsOrTableChecked(item) {
      if (item.checkbox) {
        this.toConfigureFieldDialog.draggableProp.push(item)
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog.draggableProp.length; i++) {
          if (this.toConfigureFieldDialog.draggableProp[i].label === item.label) {
            this.toConfigureFieldDialog.draggableProp.splice(i, 1);
          }
        }
      }
      this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
    },
    //tabs table 设置图标和按钮 dialog拖拽
    tabsOrTableSetClick(status, title) {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.isDialog = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data)
        }
        this.toConfigureFieldDialog.title = title;
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        //排序
        this.toConfigureFieldDialog.draggableProp.sort(function (p1, p2) {
          return p1.order - p2.order
        })
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs 高级搜索 重置按钮
  },
};
</script>
<style lang="scss" scoped></style>
